import React, { useState, useEffect } from 'react'
import type { detail, goods } from '../../type/home'
import { getDetail } from '../../api/home'
import { useLocation, useHistory } from 'react-router-dom'
import { NavBar, Swiper, Badge, Button } from 'antd-mobile'
import styles from './detail.module.scss'
import { badgeNum, price } from '../../hook'
import {
  MessageOutline,
  TruckOutline,
  BankcardOutline
} from 'antd-mobile-icons'
import { store } from '../../stores'
import { addCart } from '../../stores/actionCreator'
import { useBadge } from '../../hook/badeg'

export default function Index () {
  const [goodsDetail, setGoodsDetai] = useState({} as goods)
  let [imgswipe, setImgWipe] = useState([] as string[])

  const location = useLocation()
  const history = useHistory()
  useBadge()
  const getDetailData = async () => {
    const searchparams = new URLSearchParams(location.search as string)
    const query = searchparams.get('proid')

    const res = await getDetail(query as string)
    setGoodsDetai(res.data)
    setImgWipe(res.data.banners[0].split(','))
  }
  useEffect(() => {
    getDetailData()
  }, [])
  const add = () => {
    const goods = {
      proid: goodsDetail?.proid,
      proname: goodsDetail?.proname,
      img: goodsDetail?.img1,
      price: goodsDetail?.originprice,
      number: 1,
      state: true
    }
    store.dispatch(addCart(goods))
    // console.log(goods)
  }
  return (
    <div className={styles.detail}>
      {/* 导航栏 */}
      <NavBar
        onBack={() => {
          history.goBack()
        }}
        style={{ background: 'white' }}
      >
        {goodsDetail?.proname}
      </NavBar>
      <Swiper loop autoplay className='my-swipe'>
        {imgswipe.map(item => {
          return (
            <Swiper.Item key={item}>
              <img src={item} alt='' />
            </Swiper.Item>
          )
        })}
      </Swiper>
      {/* 详细信息 */}
      <div className='info'>
        <p className='titile'>
          <span>自营</span>
          {goodsDetail?.proname}
        </p>
        <p className='price'>￥{price(goodsDetail?.originprice)}</p>
      </div>
      <div className='bottom'>
        <div className='left'>
          <div className='badge'>
            <Badge>
              <MessageOutline className='bdg' />
            </Badge>
            客服
          </div>
          <div className='badge' onClick={() => history.push('/layout/cart')}>
            <Badge
              content={badgeNum()}
              style={{ '--right': '10px', '--top': '0px' }}
            >
              <TruckOutline className='bdg' />
            </Badge>
            购物车
          </div>
          <div className='badge' style={{ marginRight: '10px' }}>
            <Badge>
              <BankcardOutline className='bdg' />
            </Badge>
            店铺
          </div>
        </div>
        <div className='right'>
          <button
            style={{
              background: 'linear-gradient(to left, #ff9219, #ffca1f)',
              borderTopLeftRadius: '20px',
              borderBottomLeftRadius: '20px'
            }}
            className='bt'
            onClick={add}
          >
            加入购物车
          </button>
          <button
            style={{
              background: 'linear-gradient(to right, #fd5731, #f01323)',
              marginRight: '12px',
              borderTopRightRadius: '20px',
              borderBottomRightRadius: '20px'
            }}
            className='bt'
          >
            立即购买
          </button>
        </div>
      </div>
    </div>
  )
}
